<template>
    <div class="container">
        <img class="head" src="https://img-blog.csdnimg.cn/20200902191522736.png#pic_center"/>

        <!-- <img class="head" src="https://pp.myapp.com/ma_icon/0/icon_42284557_1517984341/96"/> -->

        <div class="content">
            <div class="text" v-if="type===1">
                {{content}}
            </div>
            <img class="img" :src="content" v-else-if="type===2" @click="preview(content)"/>
        </div>

    </div>
</template>

<script>
    import ImagePreview from "vant/lib/image-preview";

    export default {
        name: "LeftItem",
        props: ['id', 'type', 'content'],
        methods: {
            preview(url){
                ImagePreview([url])
            }
        }
    }
</script>

<style scoped lang="scss">
    .container {
        display: flex;
        padding: 10px 15px;
        margin-right: 60px;

        .head {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid #eee;
        }

        .content {
            margin-left: 10px;
            margin-top: 10px;

            .text {
                background-color: deepskyblue;
                border-bottom-right-radius: 10px;
                padding: 5px 5px;
                font-size: 14px;
                color: #fff;
            }

            .img {
                width: 100px;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
                border-bottom-left-radius: 10px;
            }
        }

    }
</style>